<template>
  <el-dialog
    id="systemallocation"
    title="系统分配"
    :visible.sync="dialogVisible"
    width="900px">
    <el-table ref="sysTable" :data="systemList" @select="checkRowSys" @select-all="checkRowSys" v-loading="tableLoading"
              tooltip-effect="dark" style="width: 100%">
      <el-table-column type="selection" width="auto"></el-table-column>
      <el-table-column prop="sys_name" label="系统名称" width="auto"></el-table-column>
      <el-table-column prop="sys_no" label="系统编号" width="auto"></el-table-column>
      <el-table-column prop="icon_id" label="logo" width="auto"></el-table-column>
      <el-table-column prop="sys_url" label="url地址" width="auto"></el-table-column>
    </el-table>
    <el-row class="mg15">
      <el-button @click="dialogVisible = false">关闭</el-button>
      <el-button type="primary" @click="submitSys">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'

  export default {
    name: 'systemallocation',
    data () {
      return {
        dialogVisible: false,
        tableLoading: false,
        options: {},
        systemList: [],
        selectedSystemList: []
      }
    },
    watch: {
      dialogVisible (val) {}
    },
    methods: {
      // 显示dialog
      show (options) {
        this.options = options
        this.dialogVisible = true
        this.getSystemList()
      },
      // 查询系统列表
      getSystemList () {
        this.tableLoading = true
        ajax.post(api.GET_SYSTEM_LIST, { app_id: this.options.appId }).then(res => {
          this.tableLoading = false
          this.systemList = res.data
          this.systemList.forEach((item, index) => {
            if (item.isSelected === '1') {
              this.$nextTick(() => {
                this.$refs.sysTable.toggleRowSelection(this.systemList[index], true)
              })
            }
          })
        })
      },
      // 选择系统
      checkRowSys (arr) {
        this.selectedSystemList = arr.map(item => {
          return item.sys_no
        })
      },
      submitSys () {
        this.options.onConfirm(this.selectedSystemList)
      }
    },
    created () {}
  }
</script>

<style lang="stylus">
  #systemallocation
    .mg15
      text-align right
      margin 15px 0
</style>
